<template>
    <!-- 数据区域 -->
    <view class="xinguan-view" v-for="(item, index) in order" :key="item._id">
        <text class="name">{{ item.name }}</text>
        <view class="xinguan-order">
            <text>接种地点:</text>
            <text>{{ item.address }}</text>
        </view>
        <view class="xinguan-order">
            <text>疫苗厂商:</text>
            <text>{{ item.company }}</text>
        </view>
        <view class="xinguan-order">
            <text>接种时间:</text>
            <text>{{ item.date }} {{ item.period }}</text>
        </view>
        <!-- 取消预约 -->
        <view class="reg-cancel" @click="cancel(item._id, index)">
            <text :class="item.cancel ? '' : 'prevent_style'">{{ item.cancel ? '取消预约' : '已经取消' }}</text>
        </view>
    </view>
    <!-- 数据为空提示组件 -->
    <point :show="false" />
    <!-- 防止底部隐藏组件 -->
    <view style="height:200rpx"></view>
</template>
  
<script setup lang="ts">
//1.引入基础模块
import { reactive, toRefs, onMounted } from 'vue'
import { onShow, onLoad } from "@dcloudio/uni-app";
import point from '@/components/point.vue'
import { reqCoviduserOrder, reqCovidcancelOrder } from "@/serve/api"
import { rescovidOrderType } from "@/types/index"


// 2.定义页面响应式数据
let pageData = reactive({
    order: [] as rescovidOrderType[],
    isShow: false
})

// 3.批量解构导出页面响应式数据
let { order, isShow } = toRefs(pageData)

// onLoad(() => {
//     console.log('触发了onLoad')
// })

// onShow(() => {
//     console.log('触发了onShow')
// })
// 4.回去订单数据
onMounted(async () => {
    // console.log('触发了onMounted')
    let res = await reqCoviduserOrder()
    console.log(res.data)
    pageData.order = res.data
    pageData.isShow = res.data.length == 0 ? true : false
})

// 5.取消订单预约
async function cancel(id: string, index: number) {
    try {
        await reqCovidcancelOrder({ _id: id })
        pageData.order[index].cancel = false
    } catch (error) {
        console.log(error)
    }
}



</script>
  
  
<style>
@import url('../../../common-style/vaccine.css');
</style>